<template>
    <div>
      <el-row type="flex" justify="center">
        <el-col>
          <el-card class="risk-card">
          <div slot="header" class="clearfix" style="text-align: center">
            <span>存在风险人数</span>
          </div>
            <div style="text-align: center;font-size: 40px;color: red">
              {{risknum}}
            </div>

        </el-card>
        </el-col>
        <el-col>
          <el-card class="clockin-card">
            <div slot="header" class="clearfix" style="text-align: center">
              <span>未打卡人数</span>
            </div>
            <div style="text-align: center;font-size: 40px;color: red">
              {{noclockinnum}}
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
</template>

<script>
    export default {
        data(){
          return {
            risknum: null,
            noclockinnum: null,
          };
        },
      created() {
        this.initPage();
        this.riskCount();
        this.clockinCount();
      },
      methods: {
        initPage(){
          this.$axios.get('/admin')
            .then(()=>{
              this.riskCount();
              this.clockinCount();
            })
            .catch(()=>{
              this.$router.replace({path: '/'});
              location.reload();
          });
        },
        riskCount(){
          this.$axios.get('/st/countrisk').then((response)=>{
            this.risknum = response.data;
          }).catch((error)=>{
            window.alert(error);
          })
        },
        clockinCount(){
          this.$axios.get('/account/countNoClockIn').then((response)=>{
            this.noclockinnum = response.data;
          }).catch((error)=>{
            window.alert(error);
          })
        },
      },
    }
</script>

<style>

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .risk-card {
    width: 60%;
  }
  .clockin-card {
    width: 60%;
  }
</style>
